// PostItem.js

import React from "react";
import PropTypes from "prop-types";
import "./PostItem.css";
import like from "./images/like-default.png";

function PostItem(props) {
    const handleClick = () => {
        props.onVote(props.post.id);
    };

    const { post } = props;

    return (
        <li className="item">
            <div className="title">
                {post.title}
            </div>
            <div>
                author: <span>{post.author}</span>
            </div>
            <div>
                date: <span>{post.date}</span>
            </div>
            <div className="like">
                <span><img src={like} onClick={handleClick} /></span>
                <span>{post.vote}</span>
            </div>
        </li>
    );
}

PostItem.propTypes = {
    post: PropTypes.shape({
        id: PropTypes.number,
        title: PropTypes.string,
        author: PropTypes.string,
        date: PropTypes.string,
        vote: PropTypes.number
    }).isRequired,
    onVote: PropTypes.func.isRequired
}

export default PostItem;
